<template>
    <el-dialog :title="editFlag?'编辑':'新增'"
               :visible.sync="showAddressBook"
               v-if = "showAddressBook"
               :close-on-click-modal="false">
        <el-form :model="formDatas" label-position="top" :rules="rules" ref="dynamicValidateForm"
                 class="el-form&#45;&#45;inline">
            <el-form-item label="姓名" :label-width="formLabelWidth" prop="name">
                <el-input v-model="formDatas.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="部门" :label-width="formLabelWidth" prop="departmentId">
                <el-select v-model="formDatas.departmentId" :disabled="unUseFlag" placeholder="请选择部门"
                           autocomplete="off">
                    <el-option v-for="item in zzjgzd" :label="item.label" :value="item.value"
                               :key="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="岗位" :label-width="formLabelWidth" prop="position">
                <el-select v-model="formDatas.position" autocomplete="off">
                    <el-option v-for="item in listData.position" :label="item"
                               :value="item" :key="item"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="固定电话" :label-width="formLabelWidth">
                <el-input v-model="formDatas.fixedLineNum" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="手机" :label-width="formLabelWidth" prop="phoneNum">
                <el-input v-model="formDatas.phoneNum" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="身份证号" :label-width="formLabelWidth" prop="cardNum">
                <el-input v-model="formDatas.cardNum" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="民族" :label-width="formLabelWidth" prop="nationality">
                <el-select v-model="formDatas.nationality" autocomplete="off">
                    <el-option v-for="item in listData.nationality" :label="item"
                               :value="item" :key="item"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="性别" :label-width="formLabelWidth" prop="sex">
                <el-select v-model="formDatas.sex" autocomplete="off">
                    <el-option label="男" value="男"></el-option>
                    <el-option label="女" value="女"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="住址" :label-width="formLabelWidth" prop="address">
                <el-input v-model="formDatas.address" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="籍贯" :label-width="formLabelWidth" prop="nativePlace">
                <el-input v-model="formDatas.nativePlace" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="出生年月" :label-width="formLabelWidth" prop="birth">
                <el-date-picker
                        v-model="formDatas.birth"
                        type="date"
                        value-format="yyyy-MM-dd"
                        placeholder="选择日期">
                </el-date-picker>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="backList">取 消</el-button>
            <el-button type="primary" @click="updataPerson(formDatas)">确 定</el-button>
        </div>
    </el-dialog>
</template>

<script>
    import Validator from "../../formValidation/validateUtils"
    export default {
        name: "AddressBookDialog",
        data() {
            return {
                formDatas:{
                    name:'',
                    departmentId:'',
                    position:'',
                    fixedLineNum:'',
                    phoneNum:'',
                    cardNum:'',
                    nationality:'',
                    sex:'',
                    address:'',
                    nativePlace:'',
                    birth:'',
                },
                editFlags:false,
                formLabelWidth: '120px',
                //表单校验规则
                rules: {
                    name: [
                        {required: true, message: '请输入姓名', trigger: 'change'},
                        {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
                    ],
                    departmentId: [
                        {required: true, message: '请选择所在部门', trigger: 'change'}
                    ],
                    position: [
                        {required: true, message: '请选择岗位', trigger: 'change'}
                    ],
                    phoneNum: [
                        {required: true, message: '请输入手机号码', trigger: 'change'},
                        {validator: this.checkMobile, trigger: "blur", message: '请输入正确的手机号码'}
                    ],
                    cardNum: [
                        {required: true, message: '请输入身份证号', trigger: 'change'},
                        {min: 18, max: 18, message: '请输入正确的身份证号', trigger: 'blur'}
                    ],
                    nationality: [
                        {required: true, message: '请选择民族', trigger: 'change'}
                    ],
                    sex: [
                        {required: true, message: '请选择性别', trigger: 'change'}
                    ],
                    address: [
                        {required: true, message: '请输入住址', trigger: 'change'}
                    ],
                    birth: [
                        {required: true, message: '请选择出生日期', trigger: 'change'}
                    ]
                }
            }
        },
        props:['showAddressBook','editFlag','unUseFlag','formData','zzjgzd','listData'],
        watch:{
            formData(nVal,oVal){
                if(JSON.stringify(nVal) !== '{}'){
                    this.formDatas = nVal;
                }
            },
            editFlag(nVal,oVal){
                this.editFlags = nVal;
            },
            showAddressBook(nVal,oVal){
                if(nVal && JSON.stringify(this.formDatas) === '{}'){

                }
            },
        },
        methods:{
            /**
             * 更新/编辑的方法
             * @param item 表单数据参数
             */
            updataPerson(item) {
                let that = this;
                //表单校验
                 this.$refs["dynamicValidateForm"].validate((valid) => {
                     //校验通过
                     if (valid) {
                         if (that.editFlags === false) {
                             let param = item
                             param.num = item.cardNum
                             that.saveData(param)
                         }
                         //编辑
                         else {
                             let param = item;
                             param.num = item.cardNum
                             param.id = item.userId
                             that.saveData(param)
                             that.editFlags = false
                             that.$parent.editFlags = false
                         }
                     } else {
                         this.$message({type: "warning", message: "请按照规则填写选项"});
                         return false;
                     }
                 })
             },
            /**
             * 保存数据
             * @param param 表单数据
             */
            saveData(param){
                let that = this
                this.$AxiosApi.updataxx(param,'yqUrl').then(res => {
                    if (res.data.message == "SUCCESS") {
                        this.$message({
                            message: '编辑成功',
                            type: 'success'
                        });
                        that.backList()
                    }
                    that.$parent.formData = {}
                    that.formDatas = {}
                })
            },
            /**
             * 取消新增方法
             */
            backList() {
                //element的重置表单方法
                this.$refs['dynamicValidateForm'].resetFields()
                this.$parent.showAddressBook = false
                this.$parent.searchAddressBook()
            },

        },
        mounted(){
            let formData = {name:{name:''}}
            let checkInfo = {
                name:{rules:['isEmpty']}
            }
            let checkVal = Validator.checkFormData(formData,checkInfo)
            console.log(checkVal)
        }
    }
</script>

<style scoped>
    .bjxzdialog{
    .el-dialog__headerbtn {
        display: none;
    }

    .el-dialog {
        height: 700px;
        width: 1000px;
        border-radius: 6px;

    .el-dialog__header {
        height: 40px;
        padding: 0;

    .el-dialog__title {
        top: 10px;
        font-size: 16px;
        position: absolute;
        margin-left: 22px;
    }
    }

    .el-button {
        border-radius: 4px;
        height: 30px;
        width: 120px;
        align-items: center;
        line-height: 3px;
        margin-left: 50px;
    }

    .el-button--default {
        border: 1px #0081dc solid;
        color: #0081dc;
    }

    .el-input__inner {
        height: 36px;
        width: 440px;
    }

    .el-form-item {
        width: 440px;
        margin-left: 30px;
    }

    .el-select-dropdown__list {
        width: 440px;
    }

    .el-form-item__error {
        margin-left: 180px;
    }

    .el-form {
        padding-top: 20px;
    }

    .el-form-item__label {
        line-height: 24px;
        font-size: 14px;
    }
    }

    .el-dialog__body {
        background: #f0f0f0;
        width: 980px;
        margin-left: 10px;
        height: 500px;
        padding: 0;
    }

    .el-dialog__footer {
        background: #f0f0f0;
        width: 980px;
        margin-left: 10px;
        padding-top: 100px;
        padding-bottom: 20px;
    }
    }

</style>